<template>
	<view class="search_container fr-ac-jsb">
		<view class="left fr-ac">
			<view class="iconfont icon-sousuo mr-30"></view>
			<input :value="value" @input="handleInput" @blur="handleBlur" type="text" @confirm="handleConfirm" placeholder="请输入关键词">
			<view v-if="value" @click="cleaer" class="iconfont icon-cuowu"></view>
		</view>
		<view @click="search" class="right">
			搜索
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		props:{
			value:{}
		},
		methods:{
			handleInput(event){
				this.$emit('input', event.detail.value)
			},
			handleBlur(event){
				this.$emit('blur', event.detail.value)
			},
			handleConfirm(){
				this.$emit('handleConfirm', event.detail.value)
			},
			search(){
				this.$emit('search')
			},
			cleaer(){
				this.$emit('clear', '')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search_container{
		width: 100%;
		position: sticky;
		top: 0;
		left: 0;
		background-color: white;
		box-sizing: border-box;
		padding: 20rpx 30rpx ;
		
		.left{
			flex: 1;
			background-color: rgb(240,240,240);
			box-sizing: border-box;
			padding: 12rpx 30rpx;
			// border-radius: 50rpx;
			
			.iconfont{
				color: #888;
			}
			
			input{
				flex: 1;
			}
		}
		.right{
			margin-left: 30rpx;
		}
	}
</style>